﻿<link href="/Scripts/src/style/drag.css" rel="stylesheet" />
<script template type="text/html" lay-url="/json/db.json?v={{layui.admin.v}}" lay-done="layui.data.done(d)">
</script>
<script src="/Scripts/src/lib/extend/jsbeautify.js"></script>
<div class="layui-fluid">

    <div class="layui-row layui-col-space5">
        <div class="layui-col-sm6">
            <div class="layui-card">
                <div class="layui-card-body" style="padding:5px">
                    <div class="re-text-align-c re-drag-dropzone re-admin-bg">拖拽到此删除</div>
                </div>
                <div class="layui-card-body" style="overflow-y:auto" id="tool-formConfig-left">
                    <form class="layui-form re-quest-form" lay-filter="tool-formConfig-view-form"></form>
                    <form class="layui-form re-quest-form" style="background-color:#F0F0F0;" lay-filter="tool-parentFormConfig-view-form"></form>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6" style="overflow-y:auto" id="tool-formConfig-right">
            <div class="layui-card" style="margin-bottom:5px">
                <div class="layui-card-header">选择组件添加</div>
                <div class="layui-card-body">
                    <div class="layui-row tool-formConfig-element-list" lay-filter="tool-formConfig-element-list">
                        <div class="layui-col-md3 layui-col-sm4" REElementTypeSetting="string" REElementTypeTemplate="textRow">
                            <div class="layui-bg-gray">单行输入</div>
                        </div>
                        <div class="layui-col-md3 layui-col-sm4" REElementTypeSetting="textArea" REElementTypeTemplate="textArea">
                            <div class="layui-bg-gray">多行输入</div>
                        </div>
                        <div class="layui-col-md3 layui-col-sm4" REElementTypeSetting="decimal" REElementTypeTemplate="textCell">
                            <div class="layui-bg-gray">数字</div>
                        </div>
                        <div class="layui-col-md3 layui-col-sm4" REElementTypeSetting="int" REElementTypeTemplate="textCell">
                            <div class="layui-bg-gray">整数</div>
                        </div>
                        <div class="layui-col-md3 layui-col-sm4" REElementTypeSetting="dateTime" REElementTypeTemplate="dateTime">
                            <div class="layui-bg-gray">日期</div>
                        </div>
                        <div class="layui-col-md3 layui-col-sm4" REElementTypeSetting="radio" REElementTypeTemplate="radio">
                            <div class="layui-bg-gray">单项选择</div>
                        </div>
                        <div class="layui-col-md3 layui-col-sm4" REElementTypeSetting="switch" REElementTypeTemplate="switch">
                            <div class="layui-bg-gray">开关</div>
                        </div>
                        <div class="layui-col-md3 layui-col-sm4" REElementTypeSetting="checkbox" REElementTypeTemplate="checkbox">
                            <div class="layui-bg-gray">多项选择</div>
                        </div>
                        <div class="layui-col-md3 layui-col-sm4" REElementTypeSetting="select" REElementTypeTemplate="select">
                            <div class="layui-bg-gray">下拉列表</div>
                        </div>
                        <div class="layui-col-md3 layui-col-sm4" REElementTypeSetting="selects" REElementTypeTemplate="selects">
                            <div class="layui-bg-gray">下拉多选</div>
                        </div>
                        <div class="layui-col-md3 layui-col-sm4" REElementTypeSetting="phoneNumber" REElementTypeTemplate="textCell">
                            <div class="layui-bg-gray">手机号码</div>
                        </div>
                        <div class="layui-col-md3 layui-col-sm4" REElementTypeSetting="telephoneNumber" REElementTypeTemplate="textCell">
                            <div class="layui-bg-gray">固定电话</div>
                        </div>
                        <div class="layui-col-md3 layui-col-sm4" REElementTypeSetting="email" REElementTypeTemplate="textCell">
                            <div class="layui-bg-gray">电子邮箱</div>
                        </div>
                        <div class="layui-col-md3 layui-col-sm4" REElementTypeSetting="url" REElementTypeTemplate="textRow">
                            <div class="layui-bg-gray">网址</div>
                        </div>
                        <!--<div class="layui-col-md3 layui-col-sm4" REElementTypeSetting="chinese" REElementTypeTemplate="textRow">
        <div class="layui-bg-gray">中文</div>
    </div>
    <div class="layui-col-md3 layui-col-sm4" REElementTypeSetting="password" REElementTypeTemplate="password">
        <div class="layui-bg-gray">密码</div>
    </div>
    <div class="layui-col-md3 layui-col-sm4" REElementTypeSetting="hidden" REElementTypeTemplate="hidden">
        <div class="layui-bg-gray">隐藏值</div>
    </div>-->
                        <div class="layui-col-md3 layui-col-sm4" REElementTypeSetting="textEdit" REElementTypeTemplate="textEdit">
                            <div class="layui-bg-gray">描述</div>
                        </div>
                        <div class="layui-col-md3 layui-col-sm4" REElementTypeSetting="imgArea" REElementTypeTemplate="imgArea">
                            <div class="layui-bg-gray">拍照</div>
                        </div>
                        <div class="layui-col-md3 layui-col-sm4" REElementTypeSetting="copy" REElementTypeTemplate="copy">
                            <div class="layui-bg-gray">复制</div>
                        </div>
                        <!--<div class="layui-col-md3 layui-col-sm4" REElementTypeSetting="editor" REElementTypeTemplate="editor">
        <div class="layui-bg-gray">编辑器</div>
    </div>
    <div class="layui-col-md3 layui-col-sm4" REElementTypeSetting="uploadImage" REElementTypeTemplate="uploadImage">
        <div class="layui-bg-gray">上传图片</div>
    </div>
    <div class="layui-col-md3 layui-col-sm4" REElementTypeSetting="uploadFile" REElementTypeTemplate="uploadFile">
        <div class="layui-bg-gray">上传文件</div>
    </div>-->
                    </div>
                </div>
            </div>
            <div class="layui-card" style="margin-bottom:5px">
                <div class="layui-card-header">组件编辑预览</div>
                <div class="layui-card-body">
                    <form class="layui-form" lay-filter="tool-formConfig-elementView-form">
                        <div class="layui-form-item" style="margin-bottom:0">
                            <label class="layui-form-label"></label>
                            <div class="layui-input-block">
                                <button type="button" lay-submit class="layui-btn layui-btn-sm" lay-filter="tool-formConfig-elementView-form-submit">验证测试</button>
                                <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">输入重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">组件编辑</div>
                <div class="layui-card-body">
                    <form class="layui-form form-label12 input22" lay-filter="tool-formConfig-elementEdit-form">
                        <div class="layui-form-item">
                            <div class="layui-inline layui-hide" REElementTypeEdit="itemName">
                                <label class="layui-form-label">字段ID</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="itemName" class="layui-input" placeholder="请输入字段ID" autocomplete="off" lay-verify="visibleRequired" lay-verType="tips" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                                </div>
                            </div>
                            <div class="layui-inline layui-hide" REElementTypeEdit="defaultVal">
                                <label class="layui-form-label">默认值</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="defaultVal" class="layui-input" placeholder="请输入默认值" autocomplete="off" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                                </div>
                            </div>
                            <div class="layui-inline" REElementTypeEdit="fieldName">
                                <label class="layui-form-label">字段名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="fieldName" class="layui-input" placeholder="请输入字段名称" autocomplete="off" lay-verify="visibleRequired" lay-verType="tips" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                                </div>
                            </div>
                            <div class="layui-inline layui-hide" REElementTypeEdit="fieldName">
                                <label class="layui-form-label">字段英文名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="fieldName_EN" class="layui-input" placeholder="请输入字段英文名称" autocomplete="off" lay-verify="visibleRequired" lay-verType="tips" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                                </div>
                            </div>
                            <div class="layui-inline" REElementTypeEdit="placeholderText">
                                <label class="layui-form-label">输入提示</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="placeholderText" class="layui-input" placeholder="请输入输入提示" autocomplete="off" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                                </div>
                            </div>
                            <div class="layui-inline layui-hide" REElementTypeEdit="placeholderText">
                                <label class="layui-form-label">输入英文提示</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="placeholderText_EN" class="layui-input" placeholder="请输入输入英文提示" autocomplete="off" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                                </div>
                            </div>
                            <div class="layui-inline" REElementTypeEdit="initHide">
                                <label class="layui-form-label">默认隐藏</label>
                                <div class="layui-input-inline">
                                    <input type="checkbox" name="initHide" value="true" lay-skin="switch" lay-text="是|否" lay-filter="tool-formConfig-elementEdit-form-switchChange">
                                </div>
                            </div>
                            <div class="layui-inline" REElementTypeEdit="layout">
                                <label class="layui-form-label">布局</label>
                                <div class="layui-input-inline">
                                    <input type="radio" name="layout" title="行" value="row" lay-filter="tool-formConfig-elementEdit-form-changeLayout">
                                    <input type="radio" name="layout" title="列" value="cell" lay-filter="tool-formConfig-elementEdit-form-changeLayout">
                                </div>
                            </div>
                            <div class="layui-inline" REElementTypeEdit="checkboxTheme">
                                <label class="layui-form-label">风格</label>
                                <div class="layui-input-inline">
                                    <input type="radio" name="checkboxTheme" title="时尚" value="0" lay-filter="tool-formConfig-elementEdit-form-radioChange">
                                    <input type="radio" name="checkboxTheme" title="经典" value="1" lay-filter="tool-formConfig-elementEdit-form-radioChange">
                                </div>
                            </div>
                            <div class="layui-inline" REElementTypeEdit="switchText">
                                <label class="layui-form-label">默认开</label>
                                <div class="layui-input-inline">
                                    <input type="checkbox" name="switchDefault" value="true" lay-skin="switch" lay-text="是|否" lay-filter="tool-formConfig-elementEdit-form-switchChange">
                                </div>
                            </div>
                            <div class="layui-inline" REElementTypeEdit="optionTip">
                                <label class="layui-form-label">开启搜索</label>
                                <div class="layui-input-inline">
                                    <input type="checkbox" name="optionsSearch" lay-skin="switch" lay-text="是|否" checked lay-filter="tool-formConfig-elementEdit-form-switchChange">
                                </div>
                            </div>
                            <div class="layui-inline" REElementTypeEdit="dateFormat">
                                <label class="layui-form-label">日期格式</label>
                                <div class="layui-input-inline">
                                    <select name="dateFormat" lay-filter="tool-formConfig-elementEdit-form-changeDateFormat">
                                        <option value="yyyy">年</option>
                                        <option value="yyyy-MM">月</option>
                                        <option value="yyyy-MM-dd">日</option>
                                        <option value="HH">时</option>
                                        <option value="HH:mm">分</option>
                                        <option value="HH:mm:ss">秒</option>
                                        <option value="yyyy-MM-dd HH">yyyy-MM-dd HH</option>
                                        <option value="yyyy-MM-dd HH:mm">yyyy-MM-dd HH:mm</option>
                                        <option value="yyyy-MM-dd HH:mm:ss">yyyy-MM-dd HH:mm:ss</option>
                                    </select>
                                    <input name="dateType" value="month" type="hidden">
                                </div>
                            </div>
                            <div class="layui-inline" REElementTypeEdit="required">
                                <label class="layui-form-label">必填验证</label>
                                <div class="layui-input-inline">
                                    <input type="checkbox" name="required" lay-skin="switch" lay-text="是|否" lay-filter="tool-formConfig-elementEdit-form-switchChange">
                                </div>
                            </div>
                            <div class="layui-inline" REElementTypeEdit="minLen">
                                <label class="layui-form-label">最少字数</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="minLen" class="layui-input" placeholder="最少字数" autocomplete="off" lay-verify="int" lay-verType="tips" minVal="1" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                                </div>
                            </div>
                            <div class="layui-inline" REElementTypeEdit="maxLen">
                                <label class="layui-form-label">最多字数</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="maxLen" class="layui-input" placeholder="最多字数" autocomplete="off" lay-verify="int" lay-verType="tips" minVal="1" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                                </div>
                            </div>
                            <div class="layui-inline" REElementTypeEdit="minVal">
                                <label class="layui-form-label">最小值</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="minVal" class="layui-input" placeholder="最小值" autocomplete="off" lay-verify="decimal" lay-verType="tips" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                                </div>
                            </div>
                            <div class="layui-inline" REElementTypeEdit="maxVal">
                                <label class="layui-form-label">最大值</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="maxVal" class="layui-input" placeholder="最大值" autocomplete="off" lay-verify="decimal" lay-verType="tips" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                                </div>
                            </div>
                            <div class="layui-inline" REElementTypeEdit="decimalPlace">
                                <label class="layui-form-label">小数位</label>
                                <div class="layui-input-inline">
                                    <input name="decimalPlace" class="layui-input" type="text" placeholder="小数位" autocomplete="off" lay-verify="int" lay-verType="tips" minVal="0" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                                </div>
                            </div>
                            <div class="layui-inline" REElementTypeEdit="choose">
                                <label class="layui-form-label">必选验证</label>
                                <div class="layui-input-inline">
                                    <input type="checkbox" name="choose" lay-skin="switch" lay-text="是|否" lay-filter="tool-formConfig-elementEdit-form-switchChange">
                                </div>
                            </div>
                            <div class="layui-inline" REElementTypeEdit="minChecked">
                                <label class="layui-form-label">最少选中项</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="minChecked" class="layui-input" placeholder="最少选中项" autocomplete="off" lay-verify="int" lay-verType="tips" minVal="1" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                                </div>
                            </div>
                            <div class="layui-inline" REElementTypeEdit="maxChecked">
                                <label class="layui-form-label">最多选中项</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="maxChecked" class="layui-input" placeholder="最多选中项" autocomplete="off" lay-verify="int" lay-verType="tips" minVal="1" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                                </div>
                            </div>
                            <div class="layui-inline layui-hide" REElementTypeEdit="editorHeight">
                                <label class="layui-form-label">编辑器高度</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="editorHeight" class="layui-input" placeholder="编辑器高度" autocomplete="off" lay-verify="int" lay-verType="tips" minVal="1" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                                </div>
                            </div>
                            <div class="layui-inline layui-hide" REElementTypeEdit="uploadFolder">
                                <label class="layui-form-label">上传文件夹</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="uploadFolder" class="layui-input" placeholder="上传文件夹" autocomplete="off" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                                </div>
                            </div>
                            <div class="layui-inline layui-hide" REElementTypeEdit="condition">
                                <label class="layui-form-label">condition</label>
                                <div class="layui-input-inline">
                                    <script type="text/html" template lay-done="layui.form.render('select', 'tool-tableCols-form')">
                                        <select name="condition" lay-filter="tool-formConfig-elementEdit-form-selectChange">
                                            <option value="">查询条件</option>
                                            {{#  layui.admin.getDataParams('sys-search-condition', function(data){layui.each(data,function(idx,item){ }}
                                            <option value="{{ item.Member }}">{{ item['MemberName'+layui.admin.lang] }}</option>
                                            {{#  })}) }}
                                        </select>
                                    </script>
                                </div>
                            </div>
                            <div class="layui-inline layui-hide" REElementTypeEdit="compare">
                                <label class="layui-form-label">compare</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="compare" class="layui-input" autocomplete="off" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item layui-hide" REElementTypeEdit="dataType">
                            <label class="layui-form-label">数据类型</label>
                            <div class="layui-input-block">
                                <input name="dataType" type="radio" title="字符" value="string" lay-filter="tool-formConfig-elementEdit-form-radioChange">
                                <input name="dataType" type="radio" title="数字" value="decimal" lay-filter="tool-formConfig-elementEdit-form-radioChange">
                                <input name="dataType" type="radio" title="整数" value="int" lay-filter="tool-formConfig-elementEdit-form-radioChange">
                                <input name="dataType" type="radio" title="系统时间" value="sysTime" lay-filter="tool-formConfig-elementEdit-form-radioChange">
                                <input name="dataType" type="radio" title="密码" value="password" lay-filter="tool-formConfig-elementEdit-form-radioChange">
                                <input name="dataType" type="radio" title="文本" value="textArea" lay-filter="tool-formConfig-elementEdit-form-radioChange">
                                <input name="dataType" type="radio" title="对象" value="json" lay-filter="tool-formConfig-elementEdit-form-radioChange">
                            </div>
                        </div>

                        <div class="layui-form-item layui-form-text" REElementTypeEdit="options">
                            <label class="layui-form-label">选项列表</label>
                            <div class="layui-input-block">
                                <textarea name="options" placeholder="请输入选项，格式如（英文逗号分隔）：选项1,选项2,选项3" class="layui-textarea" lay-filter="tool-formConfig-elementEdit-form-valueChange"></textarea>
                            </div>
                        </div>

                        <div class="layui-form-item layui-hide" REElementTypeEdit="optionsSource">
                            <label class="layui-form-label">选项来源</label>
                            <div class="layui-input-block">
                                <script type="text/html" template lay-done="layui.form.render('select', 'tool-tableCols-form')">
                                    <select name="optionsSource" lay-filter="tool-formConfig-elementEdit-form-selectChange" lay-search="">
                                        <option value="">选项来源</option>
                                        {{#  layui.admin.getDataParams('data-params', function(data){layui.each(data,function(idx,item){ }}
                                        <option value="data-params-{{ item.Member }}">{{ item['MemberName'+layui.admin.lang] }}</option>
                                        {{#  })}) }}
                                        {{#  layui.admin.getCustomParams('custom-params', function(data){layui.each(data,function(idx,item){ }}
                                        <option value="custom-params-{{ item.Member }}">{{ item['MemberName'+layui.admin.lang] }}</option>
                                        {{#  })}) }}
                                    </select>
                                </script>
                            </div>
                        </div>
                    
                        <div class="layui-form-item layui-hide" REElementTypeEdit="fileSize">
                            <label class="layui-form-label">文件大小</label>
                            <div class="layui-input-inline">
                                <input type="text" name="fileSize" class="layui-input" placeholder="文件大小" autocomplete="off" lay-verify="int" lay-verType="tips" minVal="1" maxVal="10240" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                            </div>
                            <div class="layui-form-mid layui-word-aux">kb</div>
                        </div>
                        <div class="layui-form-item layui-hide" REElementTypeEdit="fileExts">
                            <label class="layui-form-label">文件后缀</label>
                            <div class="layui-input-inline">
                                <input type="text" name="fileExts" class="layui-input" placeholder="文件后缀" autocomplete="off" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                            </div>
                            <div class="layui-form-mid layui-word-aux">如:jpg|png|pdf|docx|xlsx</div>
                        </div>

                        <div class="layui-form-item layui-hide" REElementTypeEdit="uploadApi">
                            <label class="layui-form-label">上传API</label>
                            <div class="layui-input-block">
                                <input type="text" name="uploadApi" class="layui-input" placeholder="上传API" autocomplete="off" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                            </div>
                        </div>
                        <div class="layui-form-item layui-hide" REElementTypeEdit="editorTools">
                            <label class="layui-form-label">追加工具条</label>
                            <div class="layui-input-block">
                                <input type="text" name="editorTools" class="layui-input" placeholder="追加工具条" autocomplete="off" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                            </div>
                        </div>

                        <div class="layui-form-item layui-hide" REElementTypeEdit="optionsApi">
                            <label class="layui-form-label">选项Api</label>
                            <div class="layui-input-block">
                                <input type="text" name="optionsApi" class="layui-input" placeholder="选项Api" autocomplete="off" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                            </div>
                        </div>
                        <div class="layui-form-item layui-hide" REElementTypeEdit="optionsWhere">
                            <label class="layui-form-label">选项查询条件</label>
                            <div class="layui-input-block">
                                <textarea name="optionsWhere" placeholder="选项查询条件" autocomplete="off" class="layui-textarea" lay-filter="tool-formConfig-elementEdit-form-valueChange"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item layui-hide" REElementTypeEdit="optionKey">
                            <label class="layui-form-label">选项value字段</label>
                            <div class="layui-input-block">
                                <input type="text" name="optionKey" class="layui-input" placeholder="选项value字段" autocomplete="off" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                            </div>
                        </div>
                        <div class="layui-form-item layui-hide" REElementTypeEdit="optionText">
                            <label class="layui-form-label">选项text字段</label>
                            <div class="layui-input-block">
                                <input type="text" name="optionText" class="layui-input" placeholder="选项value字段" autocomplete="off" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                            </div>
                        </div>

                        <div class="layui-form-item layui-hide" REElementTypeEdit="event">
                            <label class="layui-form-label">form.on.event</label>
                            <div class="layui-input-block">
                                <textarea name="event" placeholder="form.on.event" autocomplete="off" class="layui-textarea" lay-filter="tool-formConfig-elementEdit-form-valueChange"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item" REElementTypeEdit="optionsChecked">
                            <label class="layui-form-label">默认选中</label>
                            <div class="layui-input-block">
                                <select name="optionsChecked" xm-select="tool-formConfig-elementEdit-form-optionsChecked" xm-select-skin="default"></select>
                            </div>
                        </div>
                        <div class="layui-form-item" REElementTypeEdit="relevanceItem">
                            <label class="layui-form-label">设置关联</label>
                            <div class="layui-input-inline">
                                <input type="hidden" name="relevanceItem" value="" />
                                <button type="button" class="layui-btn layui-btn-sm" lay-filter="tool-formConfig-elementEdit-form-setRelevanceItem">设置</button>
                            </div>
                            <div class="layui-form-mid layui-word-aux">选项改变后需要重新设置</div>
                        </div>
                        <div class="layui-form-item" REElementTypeEdit="optionTip">
                            <div class="layui-inline">
                                <label class="layui-form-label">选项提示</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="optionTip" class="layui-input" placeholder="请输入选项提示" autocomplete="off" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                                </div>
                            </div>
                            <div class="layui-inline layui-hide">
                                <label class="layui-form-label">选项英文提示</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="optionTip_EN" class="layui-input" placeholder="请输入选项英文提示" autocomplete="off" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item" REElementTypeEdit="switchText">
                            <div class="layui-inline">
                                <label class="layui-form-label">开关文字</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="switchText" class="layui-input" placeholder="格式如：开|关" autocomplete="off" lay-verify="visibleRequired" lay-verType="tips" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                                </div>
                            </div>
                            <div class="layui-inline layui-hide">
                                <label class="layui-form-label">开关英文文字</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="switchText_EN" class="layui-input" placeholder="格式如：开|关" autocomplete="off" lay-verify="visibleRequired" lay-verType="tips" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item" REElementTypeEdit="tipText">
                            <label class="layui-form-label">说明文字</label>
                            <div class="layui-input-block">
                                <input type="text" name="tipText" class="layui-input" placeholder="请输入说明文字" autocomplete="off" lay-verType="tips" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                            </div>
                        </div>
                        <div class="layui-form-item layui-hide" REElementTypeEdit="tipText">
                            <label class="layui-form-label">说明英文文字</label>
                            <div class="layui-input-block">
                                <input type="text" name="tipText_EN" class="layui-input" placeholder="请输入英文文字" autocomplete="off" lay-verType="tips" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                            </div>
                        </div>

                        <div class="layui-form-item" REElementTypeEdit="required">
                            <label class="layui-form-label">验证提示</label>
                            <div class="layui-input-block">
                                <input type="text" name="requiredMsg" class="layui-input" placeholder="请输入验证提示" autocomplete="off" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                            </div>
                        </div>
                        <div class="layui-form-item layui-hide" REElementTypeEdit="required">
                            <label class="layui-form-label">验证英文提示</label>
                            <div class="layui-input-block">
                                <input type="text" name="requiredMsg_EN" class="layui-input" placeholder="请输入验证英文提示" autocomplete="off" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                            </div>
                        </div>

                        <div class="layui-form-item" REElementTypeEdit="choose">
                            <label class="layui-form-label">验证提示</label>
                            <div class="layui-input-block">
                                <input type="text" name="chooseMsg" class="layui-input" placeholder="请输入验证提示" autocomplete="off" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                            </div>
                        </div>
                        <div class="layui-form-item layui-hide" REElementTypeEdit="choose">
                            <label class="layui-form-label">验证英文提示</label>
                            <div class="layui-input-block">
                                <input type="text" name="chooseMsg_EN" class="layui-input" placeholder="请输入验证英文提示" autocomplete="off" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                            </div>
                        </div>

                        <div class="layui-form-item layui-hide" REElementTypeEdit="regular">
                            <label class="layui-form-label">正则表达式</label>
                            <div class="layui-input-block">
                                <input type="text" name="regular" class="layui-input" placeholder="正则表达式" autocomplete="off" lay-verify="regular" lay-verType="tips" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                            </div>
                        </div>
                        <div class="layui-form-item layui-hide" REElementTypeEdit="regular">
                            <label class="layui-form-label">正则验证提示</label>
                            <div class="layui-input-block">
                                <input type="text" name="regularMsg" class="layui-input" placeholder="验证提示" autocomplete="off" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                            </div>
                        </div>
                        <div class="layui-form-item layui-hide" REElementTypeEdit="regular">
                            <label class="layui-form-label">正则验证英文提示</label>
                            <div class="layui-input-block">
                                <input type="text" name="regularMsg_EN" class="layui-input" placeholder="验证英文提示" autocomplete="off" lay-filter="tool-formConfig-elementEdit-form-valueChange">
                            </div>
                        </div>

                        <div class="layui-form-item" REElementTypeEdit="editText">
                            <textarea id="tool-formConfig-elementEdit-form-editor" name="editText"></textarea>
                            <button type="button" class="layui-btn layui-btn-sm" style="margin-top:10px" lay-filter="tool-formConfig-elementEdit-form-SyncEditorText">同步</button>
                        </div>
                        <div class="layui-form-item layui-hide">
                            <button type="button" lay-submit class="layui-btn" lay-filter="tool-formConfig-elementEdit-form-submit">提交</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row layui-hide">
        <div class="layui-card" style="margin-bottom:5px;margin-top:5px">
            <div class="layui-card-header">options</div>
            <div class="layui-card-body">
                <form class="layui-form form-label9" lay-filter="tool-formConfig-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            FormNo
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="FormNo" fieldname="FormNo" placeholder="" lay-verify="required" lay-vertype="tips" maxlen="50" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline" style="display:none">
                            <input type="hidden" name="FormID">
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">
                                FormName
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" name="FormName" fieldname="FormName" placeholder="" lay-verify="required" lay-vertype="tips" maxlen="50" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">
                                FormName_EN
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" name="FormName_EN" fieldname="FormName_EN" placeholder="" lay-verify="required" lay-vertype="tips" maxlen="100" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">
                                风格
                            </label>
                            <div class="layui-input-block">
                                <input type="radio" name="FormClass" title="常规" value="" checked lay-filter="tool-formConfig-elementEdit-changeFormClass">
                                <input type="radio" name="FormClass" title="查询" value="re-search-form" lay-filter="tool-formConfig-elementEdit-changeFormClass">
                                <input type="radio" name="FormClass" title="问卷" value="re-quest-form" lay-filter="tool-formConfig-elementEdit-changeFormClass">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="layui-layout-admin">
        <div class="layui-input-block">
            <div class="layui-footer re-text-align-c" lay-filter="tool-formConfig-footer">
                <button type="button" class="layui-btn layui-btn-default" lay-event="layoutMerge">合并行</button>
                <button type="button" class="layui-btn layui-btn-default" lay-event="layoutSplit">拆分行</button>
                <button type="button" class="layui-btn layui-btn-default" lay-event="layoutUpdate">刷新表单</button>
                <button type="button" class="layui-btn layui-btn-default" lay-event="hideElementEdit">隐藏组件编辑</button>

                <!--<button type="button" class="layui-btn layui-btn-danger" lay-event="newForm" style="margin-left:30px">新表单</button>
                <button type="button" class="layui-btn layui-btn-danger" lay-event="copyForm">复制到新表单</button>-->

                <button type="button" class="layui-btn layui-btn-default" lay-event="formView" style="margin-left:30px">预览</button>
                <button type="button" class="layui-btn layui-btn-default" lay-event="formSubmit">提交</button>
            </div>
        </div>
    </div>

</div>
<script>
    layui.data.done = function (d) {

        layui.use(['reForm', 'drag'], function () {
            var $ = layui.$
                , reForm = layui.reForm
                , form = layui.form
                , formSelects = layui.formSelects
                , view = layui.view
                , admin = layui.admin;

            var editorFun = reForm.initEditor({
                editorId: 'tool-formConfig-elementEdit-form-editor'
                , height: 200
            })

            //配置数据
            var elementTypeSettingData = d.data.ElementTypeSetting
                , elementTypeTemplateData = d.data.ElementTypeTemplate;
            var activeEditData = null//当前编辑数据
                , tempForm = admin.getLocalData('customTempForm') ? JSON.parse(admin.getLocalData('customTempForm')) : []
                , formItemsData = admin.hasArray(tempForm) ? tempForm : [];//预览表单数据

            //初始表单
            form.render(null, 'tool-formConfig-elementEdit-form');
            form.render(null, 'tool-formConfig-form');
            form.verify(reForm.verify);

            //开关事件
            form.on('switch(tool-formConfig-elementEdit-form-switchChange)', function (data) {
                $('[lay-filter="tool-formConfig-elementEdit-form-submit"]').click();
            });
            //单选
            form.on('radio(tool-formConfig-elementEdit-form-radioChange)', function (data) {
                $('[lay-filter="tool-formConfig-elementEdit-form-submit"]').click();
            });
            //改变form样式
            form.on('radio(tool-formConfig-elementEdit-changeFormClass)', function (data) {
                admin.replaceClass($('[lay-filter="tool-formConfig-view-form"]'), ['re-search-form', 're-quest-form'], data.value)
            });
            //下拉事件
            form.on('select(tool-formConfig-elementEdit-form-selectChange)', function (data) {
                if (data.elem.name === 'optionsSource')
                    optionsCheckedUpdate();
                $('[lay-filter="tool-formConfig-elementEdit-form-submit"]').click();
            });
            //改变布局事件
            form.on('radio(tool-formConfig-elementEdit-form-changeLayout)', function (data) {
                if (activeEditData.itemData.layout === data.value) return;

                reForm.layoutChange(activeEditData, $(this).val(), 0, elementTypeSettingData);

                viewAndElementViewHtmlUpdate();
                reForm.bindFormHtml(activeEditData, activeEditData.itemData);
                form.render(null, 'tool-formConfig-view-form');
                form.render(null, 'tool-formConfig-elementView-form');
            });
            //改变日期格式事件
            form.on('select(tool-formConfig-elementEdit-form-changeDateFormat)', function (data) {
                if (activeEditData.itemData.dateFormat === data.value) return;

                switch (data.value) {
                    case 'yyyy':
                        $('[lay-filter="tool-formConfig-elementEdit-form"] [name="dateType"]').val('year');
                        break;
                    case 'yyyy-MM':
                        $('[lay-filter="tool-formConfig-elementEdit-form"] [name="dateType"]').val('month');
                        break;
                    case 'yyyy-MM-dd':
                        $('[lay-filter="tool-formConfig-elementEdit-form"] [name="dateType"]').val('date');
                        break;
                    case 'HH':
                    case 'HH:mm':
                    case 'HH:mm:ss':
                        $('[lay-filter="tool-formConfig-elementEdit-form"] [name="dateType"]').val('time');
                        break;
                    case 'yyyy-MM-dd HH':
                    case 'yyyy-MM-dd HH:mm':
                    case 'yyyy-MM-dd HH:mm:ss':
                        $('[lay-filter="tool-formConfig-elementEdit-form"] [name="dateType"]').val('datetime');
                        break;
                    default:
                        $('[lay-filter="tool-formConfig-elementEdit-form"] [name="dateType"]').val('date');
                        break;
                }

                $('[lay-filter="tool-formConfig-elementEdit-form-submit"]').click();
            });
            //设置关联
            $('[lay-filter="tool-formConfig-elementEdit-form-setRelevanceItem"]').on('click', function () {
                var formLay = 'tool-formConfig-setRelevanceItem-form';

                function saveRelevance() {

                    var formData = reForm.getFormData('#' + formLay);

                    var itemVal = formData[activeEditData.itemData.itemName];
                   
                    if (!itemVal) return;

                    formData.item = itemVal;
                    delete formData[activeEditData.itemData.itemName];

                    var relevanceItem = activeEditData.itemData.relevanceItem ? typeof activeEditData.itemData.relevanceItem === 'string' ? JSON.parse(activeEditData.itemData.relevanceItem) : activeEditData.itemData.relevanceItem : [];
                    var i = 0;
                    $.each(relevanceItem, function (idx, json) {
                        if (json.item === itemVal) {
                            i++;
                            relevanceItem.splice(idx, 1, admin.jsonClone(formData))
                            return;
                        }
                    });
                    if (i === 0)
                        relevanceItem.push(formData);

                    activeEditData.itemData.relevanceItem = JSON.stringify(relevanceItem);
                    formItemsDataUpdate(activeEditData.itemId);
                }
                function setRelevance(option) {

                    var relevanceItem = activeEditData.itemData.relevanceItem ? typeof activeEditData.itemData.relevanceItem === 'string' ? JSON.parse(activeEditData.itemData.relevanceItem) : activeEditData.itemData.relevanceItem : [];

                    formSelects.value(formLay + '-relevanceShow', []);
                    formSelects.value(formLay + '-relevanceHide', []);
                    $.each(relevanceItem, function (idx, json) {
                        if (json.item === option) {
                            formSelects.value(formLay + '-relevanceShow', json.relevanceShow ? json.relevanceShow.split(',') : []);
                            formSelects.value(formLay + '-relevanceHide', json.relevanceHide ? json.relevanceHide.split(',') : []);
                            return;
                        }
                    });
                }
                
                //form.on('radio(' + formLay + '-' + activeEditData.itemData.itemName + ')', function (data) {
                //    setRelevance(data.value);
                //    saveRelevance();
                //});

                var selectsData = admin.jsonClone(elementTypeSettingData['selects']);

                var optionsLocalData = [];
                $.each(formItemsData, function (idx, json) {
                    if (json.itemData && json.itemId !== activeEditData.itemId)
                        optionsLocalData.push({ name: json.itemData.fieldName, value: json.itemId });

                    if (json.array) {
                        $.each(json.array, function (i, child) {

                            if (child.itemData && child.itemId !== activeEditData.itemId)
                                optionsLocalData.push({ name: child.itemData.fieldName, value: child.itemId });


                        });
                    }
                });

                var relevanceShow = admin.jsonClone(elementTypeTemplateData['selects']);
                relevanceShow.itemData = $.extend({}, selectsData, {
                    itemName: 'relevanceShow', fieldName: '显示字段', fieldName_EN: '显示字段', optionsLocalData: optionsLocalData, optionKey: 'value', optionText: 'name',
                    event: function (id, vals, val, isAdd, isDisabled) {
                        saveRelevance();
                    }
                });

                var relevanceHide = admin.jsonClone(elementTypeTemplateData['selects']);
                relevanceHide.itemData = $.extend({}, selectsData, {
                    itemName: 'relevanceHide', fieldName: '隐藏字段', fieldName_EN: '隐藏字段', optionsLocalData: optionsLocalData, optionKey: 'value', optionText: 'name',
                    event: function (id, vals, val, isAdd, isDisabled) {
                        saveRelevance();
                    }
                });

                var relevanceItem = admin.jsonClone(activeEditData);
                relevanceItem.itemData.event = function (data) {
                    setRelevance(data.value);
                    saveRelevance();
                }
                var itemsData = [relevanceItem, relevanceShow, relevanceHide];

                var html = '<form class="layui-form " lay-filter="' + formLay + '" id="' + formLay + '">'
                    + admin.getFormHtml(itemsData)
                    + '</form>';

                reForm.popupForm({
                    formHtml: html,
                    FormItemsData: itemsData,
                    title: '设置关联',
                    formLay: formLay,
                    formInit: function () {
                        var relevanceItem = activeEditData.itemData.relevanceItem ? typeof activeEditData.itemData.relevanceItem === 'string' ? JSON.parse(activeEditData.itemData.relevanceItem) : activeEditData.itemData.relevanceItem : [];

                        var items = [];
                        $('[lay-filter="' + formLay + '-' + activeEditData.itemData.itemName + '"]').each(function () {
                            items.push($(this).val());
                        })
                        for (var i = 0; i < relevanceItem.length; i++) {
                            if ($.inArray(relevanceItem[i].item, items) === -1) {
                                relevanceItem.splice(i, 1);
                                i--;
                            }
                        }

                        activeEditData.itemData.relevanceItem = JSON.stringify(relevanceItem);
                        formItemsDataUpdate(activeEditData.itemId);

                        setRelevance(activeEditData.itemData.optionsChecked);
                    }
                })

            });
            //同步编辑器内容
            $('[lay-filter="tool-formConfig-elementEdit-form-SyncEditorText"]').on('click', function () {
                $('[lay-filter="tool-formConfig-elementEdit-form-submit"]').click();
            });
            //提交组件编辑表单
            form.on('submit(tool-formConfig-elementEdit-form-submit)', function (data) {
                if (!activeEditData) return;
                var defaultData = elementTypeSettingData[activeEditData.itemData.elementType];

                var fields = reForm.getFilterFormData(data, 'tool-formConfig-elementEdit-form');

                var defaultKeys = Object.keys(defaultData);
                var objKeys = Object.keys(data.field);
                $.each(objKeys, function (k, v) {
                    if ($.inArray(v, defaultKeys) === -1) delete fields[v];
                });

                fields.editText = (editorFun.content() == '' ? defaultData.editText : editorFun.content());

                $.extend(activeEditData.itemData, $.extend({}, defaultData, fields));
                reForm.bindFormHtml(activeEditData, activeEditData.itemData);

                form.render(null, 'tool-formConfig-view-form');
                form.render(null, 'tool-formConfig-elementView-form');

                formItemsDataUpdate(activeEditData.itemId);

                return false;
            });
            //提交组件预览表单
            form.on('submit(tool-formConfig-elementView-form-submit)', function (data) {
                var formData = reForm.getFilterFormData(data, 'tool-formConfig-elementView-form');
                layui.view.popup({ content: JSON.stringify(formData).replace(/\,/g, ',\n') });
                return false;
            });

            //选择组件添加
            $('[lay-filter="tool-formConfig-element-list"] [REElementTypeSetting]').click(function () {
                var REElementTypeSetting = $(this).attr('REElementTypeSetting');

                var REElementTypeTemplate = $(this).attr('REElementTypeTemplate');

                var relevanceId = '';

                addElement(REElementTypeSetting, REElementTypeTemplate, relevanceId);
            });

            //添加组件
            addElement = function (REElementTypeSetting, REElementTypeTemplate, relevanceId) {
                var templateJson = elementTypeTemplateData[REElementTypeTemplate];
                if (!templateJson) return;

                var settingJson = elementTypeSettingData[REElementTypeSetting];
                if (!settingJson) return;

                activeEditData = admin.jsonClone(templateJson);
                activeEditData.itemData = admin.jsonClone(settingJson);

                if (relevanceId)
                    activeEditData.relevanceId = relevanceId;

                viewAndElementViewHtmlUpdate();

                if (activeEditData.itemData.editText)
                    editorFun.setContent(activeEditData.itemData.editText);

                reForm.bindFormHtml(activeEditData, activeEditData.itemData);
                formItemsDataUpdate(activeEditData.itemId);

                form.render(null, 'tool-formConfig-view-form');
                form.render(null, 'tool-formConfig-elementView-form');

                elementEditHtmlReset();
                return activeEditData.itemId;
            };

            //更新预览表单和组件预览表单
            viewAndElementViewHtmlUpdate = function () {
                var html = admin.getFormHtml(activeEditData);

                if ($('[lay-filter="tool-formConfig-elementView-form"] >div').length > 1)
                    $('[lay-filter="tool-formConfig-elementView-form"] >div:first').remove();

                $('[lay-filter="tool-formConfig-elementView-form"]').prepend(html);

                //预览表单当前选中项
                var activeObj = $('[lay-filter="tool-formConfig-view-form"] .re-drag-active-edit');
                if (activeObj.parent().hasClass('re-drag-merge')) {
                    activeObj = activeObj.parent();
                }
                //更新添加预览表单项
                var editObj = $('[lay-filter="tool-formConfig-view-form"] [reitemid="' + activeEditData.itemId + '"]');
                if (editObj.html()) {
                    editObj.before(html);
                    editObj.remove();
                }
                else if (activeObj.html())
                    activeObj.after(html);
                else
                    $('[lay-filter="tool-formConfig-view-form"]').append(html);

                elementViewDragClassClear();
                activeEditClass();

                formItemsDataUpdate(activeObj.attr('reitemid'));
            };

            //更新组件预览和组件编辑
            elementViewAndEditHtmlUpdate = function (html, itemId) {

                if (activeEditData !== null && itemId === activeEditData.itemId && $('[lay-filter="tool-formConfig-view-form"] [reitemid="' + itemId + '"]').hasClass('re-drag-active-edit'))
                    return;

                if ($('[lay-filter="tool-formConfig-elementView-form"] >div').length > 1)
                    $('[lay-filter="tool-formConfig-elementView-form"] >div:first').remove();

                if (html !== '') {
                    $('[lay-filter="tool-formConfig-elementView-form"]').prepend(html);

                    activeEditData = admin.getJsonObjFromListByItemId(formItemsData, itemId);

                    reForm.bindFormHtml(activeEditData, activeEditData.itemData);

                    form.render(null, 'tool-formConfig-view-form');
                    form.render(null, 'tool-formConfig-elementView-form');

                    elementViewDragClassClear();
                    activeEditClass();

                    elementEditHtmlReset();
                }
            };

            //选择组件添加更新数据
            formItemsDataUpdate = function (newItemId) {
                if (formItemsData.length === 0 || !newItemId)
                    formItemsData.push(admin.jsonClone(activeEditData));
                else if (activeEditData.itemId !== newItemId)
                    admin.updateJsonListObjIndex(formItemsData, activeEditData, activeEditData.itemId, newItemId, 1);
                else
                    admin.updateJsonListObjByItemId(formItemsData, activeEditData, activeEditData.itemId);

                admin.localData('customTempForm', admin.stringify(formItemsData));
            };

            //js格式化
            function jsBeautify(obj) {
                var js_source = obj.val().replace(/^\s+/, '');
                if (js_source.length == 0)
                    return false;

                var fjs = js_beautify(js_source, 1, '\t');
                obj.val(fjs);
            }

            function optionBeautify(obj) {
                var arr = obj.val().replace(/[\r\n]/g, '').replace(/[\n]/g, '').split(',');//admin.trimAll(obj.val()).split(',');//.replace(/[\r\n]/g, ',')

                var last = arr.pop();

                //$.unique(arr.sort());
                //arr = arr.filter(s => $.trim(s).length > 0);

                var temp = [];
                $.each(arr, function (k, v) {
                    if (v!==''&&$.inArray(v, temp) === -1)
                        temp.push(v);
                });

                temp.push(last);
               
                obj.val(temp.join(',\n'));

                reForm.expandingArea(obj[0])
            }

            function beautify() {
                ['optionsWhere', 'event'].forEach(function (k, v) {
                    var obj = $('[lay-filter="tool-formConfig-elementEdit-form"] [name="' + k + '"]');
                    obj.css({ 'min-height': '30px' });
                    reForm.expandingArea(obj[0]);
                    jsBeautify(obj);
                    obj.blur(function () {
                        jsBeautify($(this));
                    })
                });
                ['options'].forEach(function (k, v) {
                    var obj = $('[lay-filter="tool-formConfig-elementEdit-form"] [name="' + k + '"]');
                    obj.css({ 'min-height': '30px' });
                    reForm.expandingArea(obj[0], function (el) {
                        optionBeautify($(el))
                    });
                });
            }
            //初始化组件编辑表单
            elementEditHtmlUpdate = function () {
                $('[lay-filter="tool-formConfig-elementEdit-form"] [REElementTypeEdit]').hide();

                $('[lay-filter="tool-formConfig-elementEdit-form"]').on('input propertychange', '[lay-filter="tool-formConfig-elementEdit-form-valueChange"]', function () {

                    if ($(this).attr('name') === 'itemName'
                        && $.trim($(this).val()) !== ''
                        && $('[lay-filter="tool-formConfig-view-form"] [name="' + $.trim($(this).val()) + '"]').length > 0
                        && !$('[lay-filter="tool-formConfig-view-form"] [name="' + $.trim($(this).val()) + '"]').closest('[reitemid]').hasClass('re-drag-active-edit')) return view.warn('字段ID已重复，请更改...');
                    if ($(this).attr('name') === 'fieldName')
                        $('[lay-filter="tool-formConfig-elementEdit-form"] [name="placeholderText"]').val('请输入' + $(this).val());
                    if ($(this).attr('name') === 'fieldName_EN')
                        $('[lay-filter="tool-formConfig-elementEdit-form"] [name="placeholderText_EN"]').val('请输入' + $(this).val());

                    if ($.inArray($(this).attr('name'), ['options', 'optionsApi', 'optionKey', 'optionText', 'optionsWhere']) > -1)
                        optionsCheckedUpdate();

                    $('[lay-filter="tool-formConfig-elementEdit-form-submit"]').click();
                });
            };
            //重置组件编辑表单
            elementEditHtmlReset = function () {

                reForm.loadFormData(activeEditData.itemData, 'tool-formConfig-elementEdit-form');
                $('[lay-filter="tool-formConfig-elementEdit-form"] [REElementTypeEdit]').hide();
                $.each(activeEditData.itemData, function (k, v) {
                    if (!(k === 'layout' && v === '' || k === 'dataType' && activeEditData.itemData.elementType !== 'hidden'))
                        $('[lay-filter="tool-formConfig-elementEdit-form"] [REElementTypeEdit="' + k + '"]').show();
                });

                if (activeEditData.itemData.editText)
                    editorFun.setContent(activeEditData.itemData.editText);
                else
                    editorFun.setContent('');

                optionsCheckedUpdate();

                beautify();
            };

            //初始化当前编辑项样式
            activeEditClass = function () {
                if (activeEditData !== null) {
                    $('[lay-filter="tool-formConfig-view-form"] .re-drag-active-edit').removeClass('re-drag-active-edit');
                    $('[lay-filter="tool-formConfig-view-form"] [reitemid="' + activeEditData.itemId + '"]').addClass('re-drag-active-edit');
                    $('[lay-filter="tool-formConfig-element-list"]').find('.active').removeClass('active');
                    $('[lay-filter="tool-formConfig-element-list"] [REElementTypeSetting="' + activeEditData.itemData.elementType + '"]').children().addClass('active');
                }
            };
            clearEdit = function () {
                $('[lay-filter="tool-formConfig-view-form"] .re-drag-active-edit').removeClass('re-drag-active-edit');

                $('[lay-filter="tool-formConfig-element-list"]').find('.active').removeClass('active');

                if ($('[lay-filter="tool-formConfig-elementView-form"] >div').length > 1)
                    $('[lay-filter="tool-formConfig-elementView-form"] >div:first').remove();

                $('[lay-filter="tool-formConfig-elementEdit-form"] [REElementTypeEdit]').hide();

            }
            //初始组件预览表单样式
            elementViewDragClassClear = function () {
                $('[lay-filter="tool-formConfig-elementView-form"] >div:first').removeClass('re-drag-area');
                $('[lay-filter="tool-formConfig-elementView-form"] >div:first').find('.edit-area').removeClass('edit-area');
                $('[lay-filter="tool-formConfig-elementView-form"] >div:first').find('.drag-area').removeClass('drag-area');

                if ($('[lay-filter="tool-formConfig-elementView-form"] >div:first').hasClass('layui-inline')) {
                    $('[lay-filter="tool-formConfig-elementView-form"] >div:first').removeClass('layui-inline');
                    $('[lay-filter="tool-formConfig-elementView-form"] >div:first').addClass('layui-form-item');
                }
            };

            //初始化默认选项
            optionsCheckedUpdate = function () {
                var options = {
                    search: $('[lay-filter="tool-formConfig-elementEdit-form"] [name="optionsSearch"]').val()
                    , options: $('[lay-filter="tool-formConfig-elementEdit-form"] [name="options"]').val()
                    , optionsSource: $('[lay-filter="tool-formConfig-elementEdit-form"] [name="optionsSource"]').val()
                    , optionsApi: $('[lay-filter="tool-formConfig-elementEdit-form"] [name="optionsApi"]').val()
                    , optionsWhere: $('[lay-filter="tool-formConfig-elementEdit-form"] [name="optionsWhere"]').val()
                    , optionKey: activeEditData.itemData.optionKey || ''
                    , optionText: activeEditData.itemData.optionText || ''
                    , optionTip: activeEditData.itemData['optionTip' + admin.lang]
                    , initData: activeEditData.itemData
                    , initSelect: activeEditData.itemData.optionsChecked
                    , selectId: 'tool-formConfig-elementEdit-form' + '-optionsChecked'
                    , reload: true
                    , name: 'optionsChecked'
                    , radio: $.inArray(activeEditData.itemData.elementType, ['radio', 'select']) > -1 ? true : false
                    , on: function () {
                        $('[lay-filter="tool-formConfig-elementEdit-form-submit"]').click();
                    }
                };
                reForm.bindSelects(options);
            };

            //初始化行拖拽
            dragRow = function () {
                $('[lay-filter="tool-formConfig-view-form"]').dad({
                    targetClass: '.layui-form-item',
                    childrenClass: 'layui-form-item',
                    dragArea: '.drag-area',
                    editArea: '.edit-area',
                    activeItemCallback: elementViewAndEditHtmlUpdate,
                    moveItemCallback: activeEditMove
                }).addDropzone('.re-drag-dropzone', function (e) {
                    e.remove();
                    var itemId = activeEditData.itemId;
                    activeEditRemove(itemId);
                    if ($('[lay-filter="tool-formConfig-view-form"] [relevanceid="' + itemId + '"]').length > 0) {
                        activeEditRemove($('[lay-filter="tool-formConfig-view-form"] [relevanceId="' + itemId + '"]').attr('reitemid'));
                    }
                });
            };
            //初始化列拖拽

            dragCell = function () {
                $('[lay-filter="tool-formConfig-view-form"] .re-drag-merge').each(function () {

                    if (!$(this).hasClass('re-drag-active')) {
                        $(this).dad({
                            targetClass: '.layui-inline',
                            childrenClass: 'layui-inline',
                            dragArea: '.drag-area',
                            editArea: '.edit-area',
                            activeItemCallback: elementViewAndEditHtmlUpdate,
                            moveItemCallback: activeEditMove
                        }).addDropzone('.re-drag-dropzone', function (e) {
                            e.remove();
                            var itemId = activeEditData.itemId;
                            activeEditRemove(itemId);
                            if ($('[lay-filter="tool-formConfig-view-form"] [relevanceid="' + itemId + '"]').length > 0) {
                                activeEditRemove($('[lay-filter="tool-formConfig-view-form"] [relevanceId="' + itemId + '"]').attr('reitemid'));
                            }
                        });
                    }
                });
            }
            //拖拽更新数据位置
            activeEditMove = function (moveObj) {
                admin.delJsonListObjByItemId(formItemsData, activeEditData.itemId);
                admin.updateJsonListObjIndex(formItemsData, activeEditData, activeEditData.itemId, moveObj.newItemId, moveObj.moveStep);

                admin.localData('customTempForm', admin.stringify(formItemsData));
            };
            //拖拽删除
            activeEditRemove = function (itemid) {
                var activeItem = itemid;
                if ($('[lay-filter="tool-formConfig-view-form"] [reitemid="' + activeItem + '"]').parent().hasClass('re-drag-merge') && $('[lay-filter="tool-formConfig-view-form"] [reitemid="' + activeItem + '"]').siblings().length === 1) {
                    activeItem = $('[lay-filter="tool-formConfig-view-form"] [reitemid="' + activeItem + '"]').parent().attr('reitemid');
                }

                $('[lay-filter="tool-formConfig-view-form"] [reitemid="' + activeItem + '"]').remove();

                $('[lay-filter="tool-formConfig-element-list"]').find('.active').removeClass('active');

                if ($('[lay-filter="tool-formConfig-elementView-form"] >div').length > 1)
                    $('[lay-filter="tool-formConfig-elementView-form"] >div:first').remove();

                $('[lay-filter="tool-formConfig-elementEdit-form"] [REElementTypeEdit]').hide();

                activeEditData = null;
                admin.delJsonListObjByItemId(formItemsData, activeItem);
                admin.localData('customTempForm', admin.stringify(formItemsData));
            };

            var footerFun = {
                //合并行
                layoutMerge: function () {
                    var activeObj = $('[lay-filter="tool-formConfig-view-form"] .re-drag-active-edit');
                    if (!activeObj.html()) return view.warn('请先选中行。');
                    var nextObj, prevObj, mergeData;
                    var hasNext;

                    if (activeObj.parent().hasClass('re-drag-merge'))
                        activeObj = activeObj.parent();

                    var mergeJson = {};

                    nextObj = activeObj.next();
                    if (nextObj.parent().hasClass('re-drag-merge'))
                        nextObj = nextObj.parent();
                    hasNext = nextObj.hasClass('layui-form-item');
                    if (hasNext) {
                        mergeData = nextObj;
                        mergeJson = admin.getJsonObjFromListByItemId(formItemsData, nextObj.attr('reitemid'));
                    }
                    else {
                        prevObj = activeObj.prev();
                        if (prevObj.parent().hasClass('re-drag-merge'))
                            prevObj = prevObj.parent();
                        if (prevObj.hasClass('layui-form-item')) {
                            mergeData = prevObj;
                            mergeJson = admin.getJsonObjFromListByItemId(formItemsData, prevObj.attr('reitemid'));
                        }
                        else return view.warn('没有可合并的行');
                    }

                    var activeJson = admin.getJsonObjFromListByItemId(formItemsData, activeObj.attr('reitemid'));

                    var newJson = {
                        tag: 'div', class: 'layui-form-item re-drag-merge', itemId: '', array: []
                    };

                    var isPush = false;

                    if (activeJson.array) {
                        newJson = activeJson;
                        if (hasNext) {
                            if (mergeJson.array) {
                                $.each(mergeJson.array, function (idx, json) {
                                    newJson.array.push(json);
                                })
                            }
                            else
                                newJson.array.push(mergeJson);
                        } else {
                            if (mergeJson.array) {
                                $.each(mergeJson.array, function (idx, json) {
                                    newJson.array.splice(idx, 0, json);
                                })
                            }
                            else
                                newJson.array.splice(0, 0, mergeJson);
                        }
                        admin.delJsonListObjByItemId(formItemsData, mergeJson.itemId);
                    }
                    else if (mergeJson.array) {
                        newJson = mergeJson;
                        if (hasNext)
                            newJson.array.splice(0, 0, activeJson);
                        else
                            newJson.array.push(activeJson);

                        admin.delJsonListObjByItemId(formItemsData, activeJson.itemId);
                    }
                    else {
                        if (hasNext)
                            newJson.array.push(activeJson, mergeJson);
                        else
                            newJson.array.push(mergeJson, activeJson);

                        admin.delJsonListObjByItemId(formItemsData, mergeJson.itemId);

                        isPush = true;
                    }

                    $.each(newJson.array, function (idx, json) {
                        reForm.layoutChange(json, 'cell', 2, elementTypeSettingData);
                    });

                    var html = admin.getFormHtml(newJson);

                    activeObj.after(html);
                    activeObj.remove();
                    mergeData.remove();
                    activeEditClass();

                    $.each(newJson.array, function (idx, json) {
                        reForm.bindFormHtml(json, json.itemData);
                    });

                    form.render(null, 'tool-formConfig-view-form');

                    dragCell();

                    if (isPush)
                        admin.updateJsonListObjByItemId(formItemsData, newJson, activeJson.itemId);
                    else
                        admin.updateJsonListObjByItemId(formItemsData, newJson, newJson.itemId);

                    admin.localData('customTempForm', admin.stringify(formItemsData));

                    activeEditData = admin.getJsonObjFromListByItemId(formItemsData, activeEditData.itemId);

                    elementEditHtmlReset();
                }
                //拆分行
                , layoutSplit: function () {
                    var activeObj = $('[lay-filter="tool-formConfig-view-form"] .re-drag-active-edit');
                    if (!activeObj.html()) return view.warn('请先选中待拆分的行。');

                    if (activeObj.parent().hasClass('re-drag-merge'))
                        activeObj = activeObj.parent();
                    else return view.warn('没有可拆分的合并。');

                    var activeJson = admin.getJsonObjFromListByItemId(formItemsData, activeObj.attr('reitemid'));

                    $.each(activeJson.array, function (idx, json) {
                        reForm.layoutChange(json, 'row', 1, elementTypeSettingData);
                        var html = admin.getFormHtml(json);
                        activeObj.before(html);
                        reForm.bindFormHtml(json, json.itemData);
                        admin.updateJsonListObjIndex(formItemsData, json, json.itemId, activeJson.itemId, 0);
                    });

                    form.render(null, 'tool-formConfig-view-form');

                    activeObj.remove();
                    activeEditClass();

                    admin.delJsonListObjByItemId(formItemsData, activeJson.itemId);

                    admin.localData('customTempForm', admin.stringify(formItemsData));
                    activeEditData = admin.getJsonObjFromListByItemId(formItemsData, activeEditData.itemId);

                    elementEditHtmlReset();
                }
                //更新预览表单
                , layoutUpdate: function () {
                    $('[lay-filter="tool-formConfig-view-form"] >div.layui-form-item').remove();
                    var html = admin.getFormHtml(formItemsData);
                    $('[lay-filter="tool-formConfig-view-form"]').prepend(html);

                    $.each(formItemsData, function (idx, json) {
                        reForm.bindFormHtml(json, json.itemData);
                    });

                    form.render(null, 'tool-formConfig-view-form');
                    form.render(null, 'tool-formConfig-elementView-form');

                    activeEditClass();
                    dragCell();
                }
                , formView: function () {
                    if (!$('[lay-filter="tool-formConfig-form"] [name="FormID"]').val())
                        return view.warn('请先保存表单'), false;
                    location.hash = '/template/customForm/formId=' + $('[lay-filter="tool-formConfig-form"] [name="FormID"]').val()+'/tabTitle=表单预览';
                }
                , formSubmit: function () {
                    //var formConfig = reForm.getFormData('[lay-filter="tool-formConfig-form"]');
                    //if (!formConfig.FormName || !formConfig.FormName_EN || !formConfig.FormNo) {
                    //    view.warn('表单名称、表单英文名称、表单编号不能为空。')
                    //    return false;
                    //}

                    admin.req({
                        type: 'post'
                        , data: { FormID:$('[lay-filter="tool-formConfig-form"] [name="FormID"]').val(),FormConfig: admin.stringify(formItemsData), formFields: JSON.stringify(reForm.getFormFields(formItemsData)) }
                        , url: '/Form/saveFormConfig'
                        , postLoad: true
                        , tipOk: true
                        //, done: function (res) {
                        //    if (res.result && !$('[lay-filter="tool-formConfig-form"] [name="FormID"]').val()) {
                        //        formConfig.FormID = res.result;
                        //        location.hash = '/admin/tool/formConfig/formId=' + res.result;
                        //    }
                        //}
                    })
                }
                //, newForm: function () {
                //    formItemsData = [];
                //    admin.localData('customTempForm');
                //    if (!$('[lay-filter="tool-formConfig-form"] [name="FormID"]').val()) {

                //        reForm.updateFormConfig(formItemsData, elementTypeSettingData, elementTypeTemplateData);
                //        footerFun.layoutUpdate();

                //    } else
                //        location.hash = '/admin/tool/formConfig';

                //}
                //, copyForm: function () {
                //    if ($('[lay-filter="tool-formConfig-form"] [name="FormID"]').val())
                //        location.hash = '/admin/tool/formConfig';
                //    else
                //        $('[lay-filter="tool-formConfig-form"] [name="FormNo"]').val('')
                //}
                , hideElementEdit: function () {
                    clearEdit();
                }
            }
            $('[lay-filter="tool-formConfig-footer"] .layui-btn').on('click', function () {
                var type = $(this).attr('lay-event');
                footerFun[type] ? footerFun[type].call(this) : '';
            });

            $('#tool-formConfig-left').css({ "max-height": $('.layui-side-scroll').height() - $('#tool-formConfig-left').offset().top - 68 });
            $('#tool-formConfig-right').css({ "max-height": $('.layui-side-scroll').height() - $('#tool-formConfig-right').offset().top - 45 })

            dragRow();

            getInitData = function () {
                if (layui.router().search.formId) {
                    admin.req({
                        type: 'post'
                        , data: { dataId: layui.router().search.formId }
                        , url: '/Form/getFormInfo'
                        , postLoad: true
                        , done: function (res) {
                            if (res.data.FormConfig) {
                                formItemsData = JSON.parse(res.data.FormConfig);
                                admin.localData('customTempForm', admin.stringify(formItemsData));
                            } else {
                                formItemsData = [];
                                admin.localData('customTempForm');
                            }
                               

                            //form.val('tool-formConfig-form', res.data);
                            $('[lay-filter="tool-formConfig-form"] [name="FormID"]').val(res.data.FormID);
                            
                            //admin.replaceClass($('[lay-filter="tool-formConfig-view-form"]'), ['re-search-form', 're-quest-form'], res.data.FormClass);

                            if (res.data.KPIFormConfig) {
                                var parentFormItemsData = JSON.parse(res.data.KPIFormConfig);
                                var html = admin.getFormHtml(parentFormItemsData);
                                $('[lay-filter="tool-parentFormConfig-view-form"]').prepend(html);

                                $.each(parentFormItemsData, function (idx, json) {
                                    reForm.bindFormHtml(json, json.itemData,'tool-parentFormConfig-view-form');
                                });
                                form.render(null,'tool-parentFormConfig-view-form');
                            }

                            reForm.updateFormConfig(formItemsData, elementTypeSettingData, elementTypeTemplateData);
                            footerFun.layoutUpdate();
                        }
                    })
                } else {
                    reForm.updateFormConfig(formItemsData, elementTypeSettingData, elementTypeTemplateData);
                    footerFun.layoutUpdate();
                }
            };
            getInitData();

            elementEditHtmlUpdate();
        });
    }
</script>
